<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>附件上传</title>
<script src="${res}/static/js/jquery/2.0.0/jquery.min.js"></script>
<script src="${res}/static/js/bootstrap-table.min.js"></script>
<script src="${res}/static/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<link href="${res}/static/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="${res}/static/css/fileinput/fileinput.css" />  
<link type="text/css" rel="stylesheet" href="${res}/static/css/fileinput/fileinput.min.css" />  
<script type="text/javascript" src="${res}/static/js/fileinput/fileinput.js"></script>  
<script type="text/javascript" src="${res}/static/js/fileinput/fileinput.min.js"></script>  
<script type="text/javascript" src="${res}/static/js/fileinput/fileinput_locale_zh.js"></script>
<script type="text/javascript" src="${res}/static/plugin/layer-v3.1.1/layer/layer.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">
<style>
        body {
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            background-color: #EBF5F3;
        }
        * {
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        .navbar-custom {
            /*color: #FFFFFF;*/
            background-color: #56b9ab;
        }
        .navbar-brand,
        .navbar-nav li a {
            line-height: 55px;
            height: 55px;
            padding-top: 0px;
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
        }
        .navbar-default .navbar-nav > li > a {
            color: #ffffff;
        }
        .navbar-default .navbar-nav > li > a:hover {
            color: #175A94;
        }
        .page-header {
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            /* border-bottom: 1px solid #bbb;*/
        }
        hr {
            border-bottom: 1px solid #bbb;
        }
        .img_border {
            border: 1px solid #bbb;
        }
        @media screen and (min-width: 800px) {
            .container {
                width: 800px;
            }
        }
        @media screen and (min-width: 800px) {
            .center_toaster {
                right: 35%;
                width: 30%;
            }
        }
        @media screen and (min-width: 400px) and (max-width: 799px) {
            .center_toaster {
                right: 25%;
                width: 50%;
            }
        }
        @media screen and (min-width: 200px ) and (max-width: 399px) {
            .center_toaster {
                right: 10%;
                width: 80%;
            }
        }
        .row a {
            text-decoration: none;
        }
        .row a:hover {
            text-decoration: none;
        }
        .addMaigin {
            margin-bottom: 30px;
        }
        .change_font {
            font-size: 1.5em;
        }
        .button_width {
            width: 4em;
        }
        .button_width2 {
            width: 4em;
        }
        .wrapper {
            min-height: 100%;
            height: auto !important;
            height: 100%;
            margin: 0 auto -6em;
        }
        .push {
            height: 6em;
        }
        .footer, {
            height: 4em;
        }
        .color_white{
            background: #ffffff;
        }
    </style>
</head>

<body>
<input name="id" id="id" value="${id}" type="hidden" />
<div class="wrapper">
    <div class="navbar navbar-default navbar-custom" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="">
                <!--<img alt="zjk" src="../bootstrap/images/logo.png" height="50">-->
            </a>
        </div>
    </div>
    <!-- Page Content -->
    <div class="container kv-main">
		<div class="row ">
            <div style="padding:50px; ">
                <form enctype="multipart/form-data">
                    <input id="file-0a" class="file" name="file" type="file" multiple data-min-file-count="1">
                    <br>
                </form>
            </div>
        </div>
	<p style="text-align:center"><font size="5" face="arial" >注意：</font>
		请上传“jpg、png、gif、bmp、jpeg”等格式的图片或mp4格式的视频！
	</p>

    </div>
    <div class="push"></div>
</div>
</body>
<!-- Footer -->
<footer class="footer">
    <div class=" col-lg-12 text-center">
        <hr>
        
    </div>
    <!-- /.col-lg-12 -->
    <!-- /.row -->
</footer>


<!-- /.container -->

<script>
  $('#file-0a').fileinput({
        language: 'zh',
		showPreview: true,
		overwriteInitial: true, //是否显示预览
		enctype: 'multipart/form-data',
		maxFileSize: 9999999,
		initialCaption: "请选择附件文件",
		uploadUrl: '${res}/bizCustomerManage/uploadMultipleFile',
		allowedFileExtensions:  ['jpg', 'png', 'gif', 'bmp', 'jpeg', 'mp4'],
		uploadAsync: false,//默认异步上传
		uploadExtraData : function (previewId, index) {    
					var id =  $("#id").val();
					data = {
							"id" : id
					}
			        return data;
			   }, 
		}).on('filebatchuploadsuccess', function() {
			layer.alert("上传成功",
				function(){
				window.location.href="${res}/bizCustomerManage/list";
			});
		}); 
     $('#file-0a').on('fileuploaderror', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
        console.log(data);
        console.log('File upload error');
    });
    $('#file-0a').on('fileerror', function(event, data) {
        console.log(data.id);
        console.log(data.index);
        console.log(data.file);
        console.log(data.reader);
        console.log(data.files);
    });
    $('#file-0a').on('fileuploaded', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
        console.log('File uploaded triggered');
    });
    
</script>


</html>